<template>
    <div class="content">
        <levelbar></levelbar>
        <TableLayout form-title="查询条件">
            <div slot="form-title" class="table-title"></div>
            <el-form :model="formData" ref="formData" :rules="rules" class="formAuthor" label-position="right" label-width="75px" slot="form">       
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="用户名">
                            <el-input :maxlength="30" v-model="formData.account" placeholder="请输入用户名"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="真实姓名">
                            <el-input :maxlength="30" v-model="formData.userName" placeholder="请输入真实姓名"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="手机号" prop="phone">
                            <el-input :maxlength="11" v-model="formData.phone" placeholder="请输入手机号"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="角色">
                            <el-select v-model="formData.pId" placeholder="请选择" style="width:100%">
                                <el-option v-for="item in options" :key="item.pId" :label="item.sName" :value="item.pId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div class="top-line">
                    <el-button type="primary" class="top-btn" @click="onSubmit('formData')">查询</el-button>
                    <!-- <el-button class="top-btn" @click="reset('query')">清空</el-button> -->
                </div>
            </el-form>
            <div class="table-title" slot="table-title">
                <!-- <span class="table-title-span"></span> -->
                <div class="btnPosition">
                    <el-button @click="addUser">添加员工</el-button>
                </div>
            </div>
            <el-table v-loading='loading' ref="multipleTable" :data="tableData"  style="width: 100%" border >
                <el-table-column label="用户名" align="center">
                    <template scope="scope">
                        {{!scope.row.account ? '--' : scope.row.account}}
                    </template>
                </el-table-column>
                <el-table-column label="真实姓名" align="center">
                    <template scope="scope">
                        {{!scope.row.userName ? '--' : scope.row.userName}}
                    </template>
                </el-table-column>
                <el-table-column label="手机号" prop="phone" align="center">
                    <template scope="scope">
                        {{!scope.row.phone ? '--' : scope.row.phone}}
                    </template>
                </el-table-column>
                <el-table-column label="角色" prop="roleName" align="center">
                    <template scope="scope">
                        {{!scope.row.roleName ? '--' : scope.row.roleName}}
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" width="170" prop="createTime" align="center">
                    <template scope="scope">
                        {{!scope.row.createTime ? '--' : scope.row.createTime}}
                    </template>
                </el-table-column>
                <el-table-column label="创建人" prop="creatorName" align="center">
                    <template scope="scope">
                        {{!scope.row.creatorName ? '--' : scope.row.creatorName}}
                    </template>
                </el-table-column>
                <el-table-column label="状态" align="center">
                    <template scope="scope">
                        {{scope.row.status == '0' ? '禁用' : scope.row.status == '1' ? '启用' : scope.row.status == '2' ? '删除' : ''}}
                    </template>
                </el-table-column>
                <el-table-column label="最近登录时间" width="170" prop="" align="center">
                    <template scope="scope">
                        {{!scope.row.lastLoginTime ? '--' : scope.row.lastLoginTime}}
                    </template>
                </el-table-column>
                <el-table-column label="其他操作" width="220">
                    <template scope="scope">
                        <el-button class="btn-success" type="text" @click="modification(scope.row.id)">修改</el-button>
                        <el-button class="btn-success" type="text" @click="initialize(scope.row)">初始化密码</el-button>
                        <el-button class="btn-success" type="text" @click="modState(scope.row)">
                            {{scope.row.status == '0' ? '启用' : scope.row.status == '1' ? '禁用' : '--'}}
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container">
                <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="pageQuery.total" :current-page.sync="pageQuery.currentpage" :page-sizes="config.pageSizes" :page-size="config.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>
    </div>
</template>

<script>
import Levelbar from '../layout/Levelbar';
import TableLayout from 'components/TableLayout';
import { mapState, mapActions } from 'vuex';
import { getAgentRoleList, findAgentUserByPage, initAgentStaffPasswd, inactiveAccount, activeAccount } from 'api/userManage';
import validate from '@/utils/validate';
export default {
    name: 'userInof',
    components: {
        TableLayout,
        Levelbar
    },
    data() {
        return {
            formData: {
                account: '',
                userName: '',
                phone: '',
                pId: ''
            },
            loading: false,
            // 列表数据集合
            tableData: [],
            pageQuery: {
                currentpage: 1,
                total: 0
            },
            // 角色集合
            options: [],
            rules: {
                phone: [...validate.phone()]
            }
        };
    },
    computed: {
        ...mapState({
            config: state => state.config.table,
            cacheUpdated: state => state.app.cacheUpdated// 局部刷新列表
        })
    },
    watch: {// 局部刷新列表
        cacheUpdated(val) {
            val && this.getQueryList();
        }
    },
    created() {
        this.getRoleList();
        this.getQueryList();
    },
    methods: {
        ...mapActions(['ChangePageSize']),
        handleSizeChange(val) {
            this.pageQuery.currentpage = 1;
            this.ChangePageSize(val);
            this.getQueryList();
        },
        handleCurrentChange(val) {
            this.pageQuery.currentpage = val;
            this.getQueryList();
        },
        getRoleList() {
            getAgentRoleList().then(data => {
                this.options = data.data.content;
                this.options.unshift({sName: '请选择', pId: ''})
            })
        },
        // 查询
        // onSubmit() {
        //     this.getQueryList()
        // },
        onSubmit(ruleForm) {
            this.$refs[ruleForm].validate((valid) => {
                if (valid) {
                    this.getQueryList();
                    this.pageQuery.currentpage = 1;
                } else {
                    return false;
                }
            });
        },
        getQueryList() {
            this.loading = true;
            findAgentUserByPage(
                this.formData.account,
                this.formData.userName,
                this.formData.phone,
                this.formData.pId,
                this.pageQuery.currentpage,
                this.config.pageSize
            ).then(data => {
                this.loading = false;
                this.tableData = data.data.content.list;
                this.pageQuery.total = data.data.content.pagination.total;
            }).catch(Error => {
                // this.$message(Error);
                this.loading = false;
            })
        },
        addUser() {
            this.$router.push({ path: 'newUser' })
        },
        // 修改
        modification(val) {
            this.$router.push({ path: `/userManage/modifi/${val}`})
            // this.$router.push({ name: '修改员工'})
        },
        // 初始化密码
        initialize(val) {
            this.$confirm(`确定初始化【${val.account}】的密码?`, ' ', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: ' '
            }).then(() => {
                initAgentStaffPasswd(val.id).then(data => {
                    this.$message({
                        type: 'success',
                        message: '初始密码成功!新密码：111111'
                    });
                    this.getQueryList()
                }).catch(Error => {
                    // this.$message(Error);
                })
                
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消初始化'
                });          
            });
        },
        // 启用禁用
        modState(val) {
            // 启用 1 禁用 0
            if (val.status == 0) {
                this.$confirm('此操作将启用该用户, 是否继续?', ' ', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: ' '
                }).then(() => {
                    activeAccount(val.id).then(data => {
                        this.$message({
                            type: 'success',
                            message: '启用成功!'
                        });
                        this.getQueryList()
                    }).catch(Error => {
                        // this.$message(Error);
                    })
                    
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });          
                });
            } else {
                this.$confirm('此操作将禁用该用户, 是否继续?', ' ', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: ' '
                }).then(() => {
                    inactiveAccount(val.id).then(data => {
                        this.$message({
                            type: 'success',
                            message: '禁用成功!'
                        });
                        this.getQueryList()
                    }).catch(Error => {
                        // this.$message(Error);
                    })
                    
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });          
                });
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.content {
  position: relative;
  padding: 20px 20px 10px;
  $bgcolor: #fff;
  .formInline {
    .formBtn {
      width: 100%;
      height: 70px;
      border-top: 1px solid #dddddd;
      position: relative;
      .btnPosition {
        position: absolute;
        right: 0px;
        top: 18px;
      }
    }
  }
}
</style>

